<template>
  <div class="sticky top-0 z-50">
    <!-- 添加固定定位 -->
    <div
      v-if="showAd"
      class="bg-primary text-primary-content p-2 flex justify-between items-center"
    >
      <div class="flex items-center justify-center w-full">
        <span class="text-sm font-medium"
          >非正式数据，六月底会重新更新最新的单词本句子本</span
        >
      </div>
      <button class="btn btn-ghost btn-xs" @click="closeAd">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
    <div class="navbar bg-base-100 shadow-sm px-4 py-2 border-b">
      <div class="navbar-start">
        <div class="whitespace-nowrap">
          <div class="text-xl font-medium ml-3">{{ title }}</div>
        </div>
      </div>
      <div class="navbar-end flex gap-5">
        <template v-if="user">
          <slot name="search"></slot>
          <div class="dropdown dropdown-end" @click="isUser = true">
            <div
              tabindex="0"
              role="button"
              class="btn btn-ghost btn-circle avatar avatar-online"
            >
              <div class="w-10 rounded-full">
                <img :src="user.photo" alt="用户头像" />
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <button class="btn btn-primary btn-sm" @click="navigateTo('/login')">
            登录
          </button>
        </template>
      </div>
    </div>
  </div>

  <User :isOpen="isUser" @close="isUser = false" v-if="isUser" />
</template>
<script setup>
import { userSet } from "~/composables/common/user";
const { getUserData, clearUserData, closeUserDialog } = userSet();

defineProps({
  title: {
    type: String,
    default: "",
  },
});
const isUser = ref(false);
const showAd = ref(true); // 控制广告显示状态
// 关闭广告
const closeAd = () => {
  showAd.value = false;
  localStorage.setItem("adClosed", "true");
};
const user = ref(null);
onMounted(() => {
  const userData = getUserData();
  if (userData) {
    user.value = userData;
  }

  // 可选：检查localStorage中的广告关闭状态
  if (localStorage.getItem("adClosed") === "true") {
    showAd.value = false;
  }
});
</script>
